import "./index.less"
import React, { useEffect, useState } from 'react'
import { Button } from "@mui/material"
import SelectOptions from "./components/SelectOptions"
import { getQuestionTypeApi } from "@/api"
import { useNavigate, useParams } from "react-router-dom"
import { QuestionTypeKey } from '@/utils/constant'

const testTypes = [
    {
        key: 'all',
        value: '全部'
    },
    {
        key: 'notdone',
        value: '未做'
    },
    {
        key: 'done',
        value: '已做'
    },
    {
        key: 'err',
        value: '错误'
    },
]
const testNums = [
    {
        key: '5',
        value: '5'
    },
    {
        key: '10',
        value: '10'
    },
    {
        key: '20',
        value: '20'
    },
    {
        key: '30',
        value: '30'
    },
    {
        key: '50',
        value: '50'
    },
    {
        key: '100',
        value: '100'
    },
]

// 把 key 转换为中文的方式1
// function transQuestionType(key:string){
//     if(key === 'all'){
//         return '全部'
//     }else if(key === 'qa'){
//         return '问答'
//     }
// }

// const QuestionTypeKey: KeyMap = {



export default function Select() {
    // 获取 url 里面的 actionCode ， 动态路由传递过来的
    const params = useParams()
    let { actionCode } = params;
    const nav = useNavigate()

    const testTypeChange = (value: string) => { console.log(value); }
    const [questionTypes, setQuestionTypes] = useState<IKeyValue[]>([])

    // 一开始就要根据 actionCode 得到题目分类的数组
    useEffect(() => {
        if (actionCode) {
            getQuestionTypeApi(actionCode).then(res => {
                if (res.errCode === 0) {
                    // 把返回的数据进行转换
                    // 原数据 {key:'qa',value:12,sort:0}
                    // 目标： {key:'qa',value:'问答12'}
                    const result = res.data.map(item => ({
                        key: item.key,
                        value: QuestionTypeKey[item.key] + item.value
                    }))
                    setQuestionTypes(result)
                }
            })
        }

    }, [])

    let testNum = 5;
    let testType = 'all';
    let questionType = 'all'
    const gotoPractice = () => {
        // 跳转，携带多个数据到下一个页面
        nav('/practice', {
            state: {
                actionCode, testNum, testType, questionType
            }
        })
    }

    return (
        <div className="select">
            <div className="flex">
                <Button variant="contained" onClick={gotoPractice}>进入练习模式</Button>
                <Button variant="contained" color="warning">进入考试模式</Button>
            </div>
            <SelectOptions change={(value: string) => testType = value} title="试题分类" list={testTypes} />
            <SelectOptions change={(value: string) => questionType = value} title="题目分类" list={questionTypes} />
            <SelectOptions change={(value: string) => testNum = parseInt(value)} title="试题数量" list={testNums} />
        </div>
    )
}
